<template>
  <div id="couponCollection">
    <topSearch @toSearch="toSearch" :formInline="formInline"></topSearch>
    <div class="couponCollection-box">
      <div class="couponCollection-box_consumptionClaim">
        <div class="couponCollection-box_consumptionClaim_consumptionNum">
          {{ receiveSum ? receiveSum : '暂无数据' }}
        </div>
        <div class="couponCollection-box_consumptionClaim_consumptionTitle">
          领取数量
        </div>
        <div class="couponCollection-box_consumptionClaim_claimNum">
          {{ consumeSum ? consumeSum : '暂无数据' }}
        </div>
        <div class="couponCollection-box_consumptionClaim_claimTitle">
          消耗数量
        </div>
      </div>
      <div id="couponCollectionEcharts"></div>
    </div>
  </div>
</template>

<script>
import topSearch from '@component/intergralManagement/couponManagement/couponStatistics/topSearch' // 上部搜索条件
import {
  couponCollection,
  couponsNumber
} from '@/api/couponsIntegral/coupons.js' // 接口
export default {
  name: 'signInIntegral', //优惠券领取情况
  components: {
    topSearch
  },
  data() {
    return {
      myCharts: null, //初始化eacharts对象
      formInline: {
        days: 0,
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      receiveSum: 0, //优惠券领取总量
      consumeSum: 0 //优惠券消耗总量
    }
  },
  mounted() {
    this.searchList()
  },
  destroyed() {
    //销毁重绘canvas事件
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    //初始化加载echarts画布
    echartsInit() {
      this.myCharts = this.echarts.init(
        document.getElementById('couponCollectionEcharts')
      )
      const initOption = {
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        }
      }
      this.myCharts.setOption(initOption)
    },
    //查询并获取后台传来的数据
    toSearch(obj) {
      if (obj != void 0) {
        couponCollection(
          obj,
          (response) => {
            this.selectseries(response)
          },
          (response) => {
            this.myCharts.hideLoading()
            this.$message.warning('编辑失败，' + response.message)
          }
        )
        couponsNumber(
          obj,
          (response) => {
            this.consumeSum = response.consumeSum
            this.receiveSum = response.receiveSum
          },
          (response) => {
            this.loading = false
            this.$message.warning('编辑失败，' + response.message)
          }
        )
      }
    },
    //处理后台传里的数据
    selectseries(res) {
      let legendData = []
      let newData = [] //存放后台加载的data日期数据
      let newSeries = [] //存放后台加载的series数据
      if (res.series.length > 0 || res.data.length > 0) {
        newData = res.data //后台获取的日期
        res.series.forEach((item) => {
          legendData.push(item.name)
          newSeries.push({
            name: item.name,
            type: 'line',
            data: item.data,
            ...item
          })
        })
        this.updateEcharts(legendData, newData, newSeries)
      } else {
        this.receiveSum = 0 //清空优惠券领取数量
        this.consumeSum = 0 //清空优惠券消耗数量
        legendData = [] //每条线对应的数据名称
        newData = [] //存放后台加载的data日期数据
        newSeries = [] //存放后台加载的series数据
        this.myCharts.clear()
        // this.myCharts.dispose()
        this.updateEcharts(legendData, newData, newSeries)
      }
    },

    //更新echarts画布
    updateEcharts(legendData, newData, newSeries) {
      let option = {
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: newData
        },
        yAxis: {
          type: 'value'
        },
        series: newSeries
      }
      this.myCharts.setOption(option)
    },
    // 于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas，图表自适应
    screenAdapter() {
      const adapterOption = {}
      this.myCharts.setOption(adapterOption)
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.myCharts.resize()
      })
    },
    //封装初始化以及数据查询、后台数据查询和屏幕适配
    searchList() {
      this.echartsInit()
      this.toSearch()
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    }
  }
}
</script>
<style lang="less" scoped>
#couponCollection {
  margin-top: 20px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  .couponCollection-box {
    display: flex;
    flex-direction: row;
    // 消耗领取样式
    &_consumptionClaim {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // 领取数量样式
      &_consumptionNum {
        font-weight: 650;
        font-style: normal;
        font-size: 20px;
        color: #d9001b;
      }
      // 领取标题样式
      &_consumptionTitle {
        font-weight: 400;
        font-style: normal;
        font-size: 10px;
      }
      //消耗数量样式
      &_claimNum {
        margin-top: 10px;
        font-weight: 650;
        font-style: normal;
        color: #95f204;
        font-size: 20px;
      }

      //消耗标题数量
      &_claimTitle {
        font-weight: 400;
        font-style: normal;
        font-size: 10px;
      }
    }
    #couponCollectionEcharts {
      width: 100%;
      height: 380px;
    }
  }
}
</style>
